<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 100px;
      height: 100px;
      /* 不设置背景色，就可以展示出三角形 */
      /* background-color: pink; */


      /* 边框设置成50px的话，由于我们最大宽度设定为100，那么中心区域就会被边框彻底挤没 */
      /* 然后此时就会发现边框彻底变成三角形 */
      /* border: 50px solid orange; */
      /* border-right-color: blue;
      border-bottom-color: aqua;
      border-left-color: aquamarine; */

      /* 此时将其他三个角设置为透明，只留下一个角，就可以整出一个三角形 */
      /* border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent; */

      /* 上面代码优化后 直接一开始四个角都透明，再单独设置top的颜色 */
      border: 50px solid transparent;
      border-top-color: orange;

      /* 这行代码必须要加，加了之后随着boder宽度的变化，会不断挤压中心内容，最终挤没构成三角形 */
      box-sizing: border-box;

      /* 此时我们三角形是朝下的，但是可以通过旋转去变成其他朝向 */
      /* 设置旋转水平中心点和垂直中心点 */
      transform-origin: center 25%;
      transform: rotate(180deg);
    }
  </style>
</head>
<body>
  
  <div class="box"></div>

</body>
</html>